import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/ui/keep_alive.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';

class HomeCommunityController extends GetxController {
  List<String> tabs = ['关注', '上新', '推荐', '晒单', '数码', '时尚'];

  RxInt tabIndex = RxInt(0);

  late PageController pageController;

  @override
  void onInit() {
    pageController = PageController(initialPage: tabIndex.value);
    super.onInit();
  }

  @override
  void onClose() {
    pageController.dispose();
    super.onClose();
  }

  void gotoView() {
    pageController.animateToPage(tabIndex.value,
        duration: const Duration(milliseconds: 500), curve: Curves.linear);
  }
}

class HomeCommunityView extends GetView<HomeCommunityController> {
  const HomeCommunityView({super.key});

  Widget buildMain(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Center(
          child: Text(
            '社区',
            style: StylesUtils.customTextStyle(
                fontWeight: FontWeight.w700, fontSize: StylesUtils.fontSize18),
          ),
        ),
        leadingWidth: 60,
        actions: [
          IconButton(onPressed: () {}, icon: SvgUtils.assetName('u9876', width: 20, height: 20))
        ],
      ),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
              child: Container(
            margin: const EdgeInsets.only(top: 20),
            height: 84,
            child: ListView(
              scrollDirection: Axis.horizontal,
              itemExtent: 200,
              children: [
                Container(
                  width: 200,
                  height: 84,
                  margin: const EdgeInsets.only(left: 20),
                  decoration:
                      BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
                  child: Row(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.vertical(
                            top: Radius.circular(5.r), bottom: Radius.circular(5.r)),
                        child: CachedNetworkImage(
                          imageUrl:
                              'https://gw.alicdn.com/bao/uploaded/i2/552401000/O1CN018GpHSF1JG2xTiczhh_!!552401000.jpg_320x320q90.jpg',
                          width: 84,
                          height: 84,
                          fit: BoxFit.fill,
                        ),
                      ),
                      Expanded(
                          child: Container(
                        padding: const EdgeInsets.only(left: 5),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '#上班族的日常穿搭',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize16, color: ColorsUtils.color3333),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '14.6万次浏览',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13),
                              ),
                            )
                          ],
                        ),
                      ))
                    ],
                  ),
                ),
                Container(
                  width: 200,
                  height: 84,
                  margin: const EdgeInsets.only(left: 20),
                  decoration:
                      BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
                  child: Row(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.vertical(
                            top: Radius.circular(5.r), bottom: Radius.circular(5.r)),
                        child: CachedNetworkImage(
                          imageUrl:
                              'https://gw.alicdn.com/bao/uploaded/i1/2567390825/O1CN01DTb1cU1HxtQTs9hVP_!!0-item_pic.jpg_320x320q90.jpg',
                          width: 84,
                          height: 84,
                          fit: BoxFit.fill,
                        ),
                      ),
                      Expanded(
                          child: Container(
                        padding: const EdgeInsets.only(left: 5),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '#上班族的日常穿搭',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize16, color: ColorsUtils.color3333),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '14.6万次浏览',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13),
                              ),
                            )
                          ],
                        ),
                      ))
                    ],
                  ),
                ),
                Container(
                  width: 200,
                  height: 84,
                  margin: const EdgeInsets.only(left: 20),
                  decoration:
                      BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
                  child: Row(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.vertical(
                            top: Radius.circular(5.r), bottom: Radius.circular(5.r)),
                        child: CachedNetworkImage(
                          imageUrl:
                              'https://gw.alicdn.com/bao/uploaded/i2/552401000/O1CN018GpHSF1JG2xTiczhh_!!552401000.jpg_320x320q90.jpg',
                          width: 84,
                          height: 84,
                          fit: BoxFit.fill,
                        ),
                      ),
                      Expanded(
                          child: Container(
                        padding: const EdgeInsets.only(left: 5),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '#上班族的日常穿搭',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize16, color: ColorsUtils.color3333),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '14.6万次浏览',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13),
                              ),
                            )
                          ],
                        ),
                      ))
                    ],
                  ),
                ),
                Container(
                  width: 200,
                  height: 84,
                  margin: const EdgeInsets.only(left: 20),
                  decoration:
                      BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
                  child: Row(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.vertical(
                            top: Radius.circular(5.r), bottom: Radius.circular(5.r)),
                        child: CachedNetworkImage(
                          imageUrl:
                              'https://gw.alicdn.com/bao/uploaded/i1/6000000004496/O1CN01juanNr1j5DejJHPkd_!!6000000004496-0-sm.jpg_320x320q90.jpg',
                          width: 84,
                          height: 84,
                          fit: BoxFit.fill,
                        ),
                      ),
                      Expanded(
                          child: Container(
                        padding: const EdgeInsets.only(left: 5),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '#上班族的日常穿搭',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize16, color: ColorsUtils.color3333),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '14.6万次浏览',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13),
                              ),
                            )
                          ],
                        ),
                      ))
                    ],
                  ),
                ),
                Container(
                  width: 200,
                  height: 84,
                  margin: const EdgeInsets.only(left: 20),
                  decoration:
                      BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
                  child: Row(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.vertical(
                            top: Radius.circular(5.r), bottom: Radius.circular(5.r)),
                        child: CachedNetworkImage(
                          imageUrl:
                              'https://gw.alicdn.com/bao/uploaded/i4/106466809/O1CN01BTy0tC20AZX6KS0x6_!!106466809.jpg_320x320q90.jpg',
                          width: 84,
                          height: 84,
                          fit: BoxFit.fill,
                        ),
                      ),
                      Expanded(
                          child: Container(
                        padding: const EdgeInsets.only(left: 5),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '#上班族的日常穿搭',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize16, color: ColorsUtils.color3333),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '14.6万次浏览',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13),
                              ),
                            )
                          ],
                        ),
                      ))
                    ],
                  ),
                ),
              ],
            ),
          )),
          SliverPersistentHeader(
              pinned: true,
              delegate: _MyHeaderDelegate(
                  child: Row(
                children: controller.tabs
                    .asMap()
                    .map((key, value) => MapEntry(
                        key,
                        Expanded(
                          child: Center(
                            child: Obx(() => InkWell(
                                  onTap: () {
                                    controller.tabIndex.value = key;
                                  },
                                  child: Text(
                                    value,
                                    style: StylesUtils.customTextStyle(
                                        color: controller.tabIndex.value == key
                                            ? ColorsUtils.colorF048
                                            : ColorsUtils.color9999),
                                  ),
                                )),
                          ),
                        )))
                    .values
                    .toList(),
              ))),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              pinned: true,
              leading: Center(
                child: Text(
                  '社区',
                  style: StylesUtils.customTextStyle(
                      fontWeight: FontWeight.w700, fontSize: StylesUtils.fontSize18),
                ),
              ),
              leadingWidth: 60,
              actions: [
                IconButton(
                    onPressed: () {}, icon: SvgUtils.assetName('u9876', width: 20, height: 20))
              ],
              forceElevated: innerBoxIsScrolled,
            ),
            SliverToBoxAdapter(
                child: Container(
              margin: const EdgeInsets.only(top: 20),
              height: 84,
              child: ListView(
                scrollDirection: Axis.horizontal,
                itemExtent: 200,
                children: [
                  InkWell(
                    onTap: () {
                      Get.toNamed(RoutePath.communityTopic);
                    },
                    child: Container(
                      width: 200,
                      height: 84,
                      margin: const EdgeInsets.only(left: 20),
                      decoration: BoxDecoration(
                          color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
                      child: Row(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.vertical(
                                top: Radius.circular(5.r), bottom: Radius.circular(5.r)),
                            child: CachedNetworkImage(
                              imageUrl:
                                  'https://gw.alicdn.com/bao/uploaded/i2/552401000/O1CN018GpHSF1JG2xTiczhh_!!552401000.jpg_320x320q90.jpg',
                              width: 84,
                              height: 84,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Expanded(
                              child: Container(
                            padding: const EdgeInsets.only(left: 5),
                            child: Column(
                              children: [
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    '#上班族的日常穿搭',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize16,
                                        color: ColorsUtils.color3333),
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 20),
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    '14.6万次浏览',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color9999,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                )
                              ],
                            ),
                          ))
                        ],
                      ),
                    ),
                  ),
                  Container(
                    width: 200,
                    height: 84,
                    margin: const EdgeInsets.only(left: 20),
                    decoration: BoxDecoration(
                        color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
                    child: Row(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.vertical(
                              top: Radius.circular(5.r), bottom: Radius.circular(5.r)),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://gw.alicdn.com/bao/uploaded/i1/2567390825/O1CN01DTb1cU1HxtQTs9hVP_!!0-item_pic.jpg_320x320q90.jpg',
                            width: 84,
                            height: 84,
                            fit: BoxFit.fill,
                          ),
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.only(left: 5),
                          child: Column(
                            children: [
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '#上班族的日常穿搭',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize16,
                                      color: ColorsUtils.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '14.6万次浏览',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ),
                        ))
                      ],
                    ),
                  ),
                  Container(
                    width: 200,
                    height: 84,
                    margin: const EdgeInsets.only(left: 20),
                    decoration: BoxDecoration(
                        color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
                    child: Row(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.vertical(
                              top: Radius.circular(5.r), bottom: Radius.circular(5.r)),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://gw.alicdn.com/bao/uploaded/i2/552401000/O1CN018GpHSF1JG2xTiczhh_!!552401000.jpg_320x320q90.jpg',
                            width: 84,
                            height: 84,
                            fit: BoxFit.fill,
                          ),
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.only(left: 5),
                          child: Column(
                            children: [
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '#上班族的日常穿搭',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize16,
                                      color: ColorsUtils.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '14.6万次浏览',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ),
                        ))
                      ],
                    ),
                  ),
                  Container(
                    width: 200,
                    height: 84,
                    margin: const EdgeInsets.only(left: 20),
                    decoration: BoxDecoration(
                        color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
                    child: Row(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.vertical(
                              top: Radius.circular(5.r), bottom: Radius.circular(5.r)),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://gw.alicdn.com/bao/uploaded/i1/6000000004496/O1CN01juanNr1j5DejJHPkd_!!6000000004496-0-sm.jpg_320x320q90.jpg',
                            width: 84,
                            height: 84,
                            fit: BoxFit.fill,
                          ),
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.only(left: 5),
                          child: Column(
                            children: [
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '#上班族的日常穿搭',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize16,
                                      color: ColorsUtils.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '14.6万次浏览',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ),
                        ))
                      ],
                    ),
                  ),
                  Container(
                    width: 200,
                    height: 84,
                    margin: const EdgeInsets.only(left: 20),
                    decoration: BoxDecoration(
                        color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
                    child: Row(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.vertical(
                              top: Radius.circular(5.r), bottom: Radius.circular(5.r)),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://gw.alicdn.com/bao/uploaded/i4/106466809/O1CN01BTy0tC20AZX6KS0x6_!!106466809.jpg_320x320q90.jpg',
                            width: 84,
                            height: 84,
                            fit: BoxFit.fill,
                          ),
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.only(left: 5),
                          child: Column(
                            children: [
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '#上班族的日常穿搭',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize16,
                                      color: ColorsUtils.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '14.6万次浏览',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ),
                        ))
                      ],
                    ),
                  ),
                ],
              ),
            )),
            SliverPersistentHeader(
                pinned: true,
                delegate: _MyHeaderDelegate(
                    child: Container(
                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                  child: Row(
                    children: controller.tabs
                        .asMap()
                        .map((key, value) => MapEntry(
                            key,
                            Expanded(
                              child: Center(
                                child: Obx(() => InkWell(
                                      onTap: () {
                                        controller.tabIndex.value = key;
                                        controller.gotoView();
                                      },
                                      child: Text(
                                        value,
                                        style: StylesUtils.customTextStyle(
                                            color: controller.tabIndex.value == key
                                                ? ColorsUtils.colorF048
                                                : ColorsUtils.color9999),
                                      ),
                                    )),
                              ),
                            )))
                        .values
                        .toList(),
                  ),
                ))),
            Obx(() {
              if (controller.tabIndex.value == 1 || controller.tabIndex.value == 2) {
                return SliverToBoxAdapter(
                    child: Container(
                        margin: const EdgeInsets.only(bottom: 15, top: 10),
                        alignment: Alignment.center,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(5.r),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://gw.alicdn.com/bao/uploaded/i4/202224264/O1CN01YYwIBd1hMxlkzs99F_!!202224264.jpg_320x320q90.jpg',
                            width: 335,
                            height: 170,
                            fit: BoxFit.fitWidth,
                          ),
                        )));
              }
              return const SliverToBoxAdapter();
            })
          ];
        },
        body: PageView(
          physics: const NeverScrollableScrollPhysics(),
          scrollBehavior: const ScrollBehavior(),
          controller: controller.pageController,
          children: [
            KeepAliveWrapperTabView(
              child: const CommunityFollowView(),
              callback: () {
                Get.put(CommunityFollowController());
              },
            ),
            KeepAliveWrapperTabView(
              child: const CommunityNewlyView(),
              callback: () {
                Get.put(CommunityNewlyController());
              },
            ),
            KeepAliveWrapperTabView(
              child: const CommunityRecommendView(),
              callback: () {
                Get.put(CommunityRecommendController());
              },
            ),
            KeepAliveWrapperTabView(
              child: const CommunitySunOrderView(),
              callback: () {
                Get.put(CommunitySunOrderController());
              },
            ),
            KeepAliveWrapperTabView(
              child: const CommunityDigitalView(),
              callback: () {
                Get.put(CommunityDigitalController());
              },
            ),
            KeepAliveWrapperTabView(
              child: const CommunityFashionView(),
              callback: () {
                Get.put(CommunityFashionController());
              },
            ),
          ],
        ),
      ),
    );
  }
}

class CommunityFollowController extends GetxController {
  final globalKey = GlobalKey<AnimatedListState>();
  RxList<String> data = RxList([]);

  @override
  void onInit() {
    data.add(
        'https://img2.baidu.com/it/u=83201353,2408693965&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400');
    data.add(
        'https://img0.baidu.com/it/u=4047500887,3806689038&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=528597190,3213543828&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=3523116638,3538063843&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=3875698598,3049376128&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img0.baidu.com/it/u=1105441794,2502660386&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=3650670004,2103072122&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    super.onInit();
  }

  @override
  void onReady() {
    // 延时新增
    Future<void>.delayed(const Duration(seconds: 5), () {
      int index = data.length;
      _insertItem(index,
          'https://img0.baidu.com/it/u=4047500887,3806689038&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
    });
    super.onReady();
  }

  void _insertItem(int index, String item) {
    data.insert(index, item);
    globalKey.currentState?.insertItem(index, duration: const Duration(milliseconds: 500));
  }
}

class CommunityFollowView extends GetView<CommunityFollowController> {
  const CommunityFollowView({super.key});

  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      padding: EdgeInsets.zero,
      key: controller.globalKey,
      itemBuilder: (BuildContext context, int index, Animation<double> animation) {
        return FadeTransition(
          opacity: animation,
          child: buildItem(context, index),
        );
      },
      initialItemCount: controller.data.length,
    );
  }

  Widget buildItem(context, int index) {
    String url = controller.data[index];
    return Container(
      margin: const EdgeInsets.only(bottom: 15),
      alignment: Alignment.center,
      child: Container(
        width: 335,
        decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
        padding: const EdgeInsets.all(10),
        child: Stack(
          children: [
            Column(
              children: [
                Container(
                  margin: const EdgeInsets.only(top: 20),
                  child: Row(
                    children: [
                      CircleAvatar(
                        radius: 20,
                        backgroundImage: NetworkImage(url),
                      ),
                      Expanded(
                          child: Container(
                        padding: const EdgeInsets.only(left: 10),
                        child: Column(
                          children: [
                            Container(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                'SANSAN家的店',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 5),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '2018-5-12 14:21',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13),
                              ),
                            )
                          ],
                        ),
                      ))
                    ],
                  ),
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  margin: const EdgeInsets.symmetric(vertical: 15),
                  child: Text(
                    '本想点个外卖吃，然后发现这个店...????',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                  ),
                ),
                StaggeredGrid.count(
                  crossAxisCount: 3,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 15,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i1/644216784/O1CN01lSybtf1zz7Tgy5WQp_!!644216784.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i1/363158287/O1CN01xngLle2B5UkR3lCBp_!!0-item_pic.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i1/644216784/O1CN01lSybtf1zz7Tgy5WQp_!!644216784.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i3/3103195752/O1CN01w1BaVx1sMT693Eeht_!!3103195752.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i2/2807325662/O1CN01jZBhKs1rhF2hAubt3_!!2807325662.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i4/261181636/O1CN01DAo33t1NxKom6M0lV_!!261181636.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i3/2772692214/O1CN01xANI8u1SE3ddDOYX8_!!0-item_pic.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i3/1881787699/O1CN01tAcKdo26kC0gE2l3G_!!1881787699.png_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i4/261181636/O1CN01DAo33t1NxKom6M0lV_!!261181636.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                  ],
                ),
                Container(
                  padding: const EdgeInsets.only(top: 15, bottom: 10, left: 15, right: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '465阅读',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                      ),
                      Wrap(
                        spacing: 15,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        alignment: WrapAlignment.end,
                        children: [
                          RichText(
                              text: TextSpan(children: [
                            WidgetSpan(
                                child: SvgUtils.assetName('u9915', width: 15, height: 13),
                                alignment: PlaceholderAlignment.middle),
                            TextSpan(
                                text: '  23',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
                          ])),
                          RichText(
                              text: TextSpan(children: [
                            WidgetSpan(
                                child: SvgUtils.assetName('u9921', width: 15, height: 13),
                                alignment: PlaceholderAlignment.middle),
                            TextSpan(
                                text: '  35',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
                          ]))
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
            Positioned(
              top: 5,
              right: 5,
              width: 20,
              height: 20,
              child: IconButton(
                onPressed: () {
                  onDeleteItem(context, index);
                },
                icon: Icon(
                  Icons.close,
                  size: 15,
                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  void onDeleteItem(BuildContext context, int index) {
    controller.globalKey.currentState!.removeItem(index, (context, animation) {
      Widget item = buildItem(context, index);
      controller.data.removeAt(index);
      return FadeTransition(
        opacity: CurvedAnimation(
          parent: animation,
          //让透明度变化的更快一些
          curve: const Interval(0.1, 1.0),
        ),
        // 不断缩小列表项的高度
        child: SizeTransition(
          sizeFactor: animation,
          axisAlignment: 0.0,
          child: item,
        ),
      );
    }, duration: const Duration(milliseconds: 500));
  }
}

class CommunityNewlyController extends GetxController {
  final globalKey = GlobalKey<AnimatedListState>();
  RxList<String> data = RxList([]);

  @override
  void onInit() {
    data.add(
        'https://img2.baidu.com/it/u=83201353,2408693965&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400');
    data.add(
        'https://img0.baidu.com/it/u=4047500887,3806689038&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=528597190,3213543828&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=3523116638,3538063843&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=3875698598,3049376128&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img0.baidu.com/it/u=1105441794,2502660386&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=3650670004,2103072122&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    super.onInit();
  }

  @override
  void onReady() {
    // 延时新增
    Future<void>.delayed(const Duration(seconds: 5), () {
      data.add(
          'https://img0.baidu.com/it/u=4047500887,3806689038&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
      globalKey.currentState!
          .insertItem(data.length - 1, duration: const Duration(milliseconds: 500));
    });
    super.onReady();
  }
}

class CommunityNewlyView extends GetView<CommunityNewlyController> {
  const CommunityNewlyView({super.key});

  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      padding: EdgeInsets.zero,
      key: controller.globalKey,
      itemBuilder: (BuildContext context, int index, Animation<double> animation) {
        String url = controller.data[index];
        return _buildItem(url, index, animation);
      },
      initialItemCount: controller.data.length,
    );
  }

  void _removeItem(int index) {
    String item = controller.data.removeAt(index);
    controller.globalKey.currentState!
        .removeItem(index, (context, animation) => _buildItem(item, index, animation));
  }

  Widget _buildItem(String item, int index, Animation<double> animation) => SlideTransition(
      position:
          Tween<Offset>(begin: const Offset(0, -1), end: const Offset(0, 0)).animate(animation),
      child: FadeTransition(
          opacity: animation,
          child: SizeTransition(
              axis: Axis.vertical, sizeFactor: animation, child: _itemWid(item, index))));

  Widget _itemWid(String item, int index) {
    return Container(
      margin: const EdgeInsets.only(bottom: 15),
      alignment: Alignment.center,
      child: Container(
        width: 335,
        decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
        padding: const EdgeInsets.all(10),
        child: Stack(
          children: [
            Column(
              children: [
                Container(
                  margin: const EdgeInsets.only(top: 20),
                  child: Row(
                    children: [
                      CircleAvatar(
                        radius: 20,
                        backgroundImage: NetworkImage(item),
                      ),
                      Expanded(
                          child: Container(
                        padding: const EdgeInsets.only(left: 10),
                        child: Column(
                          children: [
                            Container(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                'SANSAN家的店',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 5),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '2018-5-12 14:21',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13),
                              ),
                            )
                          ],
                        ),
                      ))
                    ],
                  ),
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  margin: const EdgeInsets.symmetric(vertical: 15),
                  child: Text(
                    '本想点个外卖吃，然后发现这个店...????',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                  ),
                ),
                StaggeredGrid.count(
                  crossAxisCount: 3,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 15,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i1/644216784/O1CN01lSybtf1zz7Tgy5WQp_!!644216784.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i1/363158287/O1CN01xngLle2B5UkR3lCBp_!!0-item_pic.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i1/644216784/O1CN01lSybtf1zz7Tgy5WQp_!!644216784.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i3/3103195752/O1CN01w1BaVx1sMT693Eeht_!!3103195752.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i2/2807325662/O1CN01jZBhKs1rhF2hAubt3_!!2807325662.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i4/261181636/O1CN01DAo33t1NxKom6M0lV_!!261181636.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i3/2772692214/O1CN01xANI8u1SE3ddDOYX8_!!0-item_pic.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i3/1881787699/O1CN01tAcKdo26kC0gE2l3G_!!1881787699.png_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i4/261181636/O1CN01DAo33t1NxKom6M0lV_!!261181636.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                  ],
                ),
                Container(
                  padding: const EdgeInsets.only(top: 15, bottom: 10, left: 15, right: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '465阅读',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                      ),
                      Wrap(
                        spacing: 15,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        alignment: WrapAlignment.end,
                        children: [
                          RichText(
                              text: TextSpan(children: [
                            WidgetSpan(
                                child: SvgUtils.assetName('u9915', width: 15, height: 13),
                                alignment: PlaceholderAlignment.middle),
                            TextSpan(
                                text: '  23',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
                          ])),
                          RichText(
                              text: TextSpan(children: [
                            WidgetSpan(
                                child: SvgUtils.assetName('u9921', width: 15, height: 13),
                                alignment: PlaceholderAlignment.middle),
                            TextSpan(
                                text: '  35',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
                          ]))
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
            Positioned(
              top: 5,
              right: 5,
              width: 20,
              height: 20,
              child: IconButton(
                onPressed: () {
                  _removeItem(index);
                },
                icon: Icon(
                  Icons.close,
                  size: 15,
                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class CommunityRecommendController extends GetxController {
  final globalKey = GlobalKey<AnimatedListState>();
  RxList<String> data = RxList([]);

  @override
  void onInit() {
    data.add(
        'https://img2.baidu.com/it/u=83201353,2408693965&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400');
    data.add(
        'https://img0.baidu.com/it/u=4047500887,3806689038&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=528597190,3213543828&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=3523116638,3538063843&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=3875698598,3049376128&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img0.baidu.com/it/u=1105441794,2502660386&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    data.add(
        'https://img2.baidu.com/it/u=3650670004,2103072122&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');
    super.onInit();
  }

  @override
  void onReady() {
    // 延时新增
    Future<void>.delayed(const Duration(seconds: 5), () {
      int index = data.length;
      _insertItem(index,
          'https://img0.baidu.com/it/u=4047500887,3806689038&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
    });
    super.onReady();
  }

  void _insertItem(int index, String item) {
    data.insert(index, item);
    globalKey.currentState?.insertItem(index, duration: const Duration(milliseconds: 500));
  }
}

class CommunityRecommendView extends GetView<CommunityRecommendController> {
  const CommunityRecommendView({super.key});

  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      padding: EdgeInsets.zero,
      key: controller.globalKey,
      itemBuilder: (BuildContext context, int index, Animation<double> animation) {
        String url = controller.data[index];
        return _buildItem(url, index, animation);
      },
      initialItemCount: controller.data.length,
    );
  }

  Widget _buildItem(String item, int index, Animation<double> animation) => SlideTransition(
      position: Tween<Offset>(begin: const Offset(0, -1), end: const Offset(0, 0)).animate(
          CurvedAnimation(parent: animation, curve: Curves.linear, reverseCurve: Curves.linear)),
      child: _itemWid(item, index));

  Widget _itemWid(String item, int index) {
    return Container(
      margin: const EdgeInsets.only(bottom: 15),
      alignment: Alignment.center,
      child: Container(
        width: 335,
        decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(5.r)),
        padding: const EdgeInsets.all(10),
        child: Stack(
          children: [
            Column(
              children: [
                Container(
                  margin: const EdgeInsets.only(top: 20),
                  child: Row(
                    children: [
                      CircleAvatar(
                        radius: 20,
                        backgroundImage: NetworkImage(item),
                      ),
                      Expanded(
                          child: Container(
                        padding: const EdgeInsets.only(left: 10),
                        child: Column(
                          children: [
                            Container(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                'SANSAN家的店',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 5),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '2018-5-12 14:21',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13),
                              ),
                            )
                          ],
                        ),
                      ))
                    ],
                  ),
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  margin: const EdgeInsets.symmetric(vertical: 15),
                  child: Text(
                    '本想点个外卖吃，然后发现这个店...????',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                  ),
                ),
                StaggeredGrid.count(
                  crossAxisCount: 3,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 15,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i1/644216784/O1CN01lSybtf1zz7Tgy5WQp_!!644216784.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i1/363158287/O1CN01xngLle2B5UkR3lCBp_!!0-item_pic.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i1/644216784/O1CN01lSybtf1zz7Tgy5WQp_!!644216784.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i3/3103195752/O1CN01w1BaVx1sMT693Eeht_!!3103195752.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i2/2807325662/O1CN01jZBhKs1rhF2hAubt3_!!2807325662.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i4/261181636/O1CN01DAo33t1NxKom6M0lV_!!261181636.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i3/2772692214/O1CN01xANI8u1SE3ddDOYX8_!!0-item_pic.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i3/1881787699/O1CN01tAcKdo26kC0gE2l3G_!!1881787699.png_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5.r),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i4/261181636/O1CN01DAo33t1NxKom6M0lV_!!261181636.jpg_320x320q90.jpg',
                        width: 100,
                        height: 100,
                        fit: BoxFit.fill,
                      ),
                    ),
                  ],
                ),
                Container(
                  padding: const EdgeInsets.only(top: 15, bottom: 10, left: 15, right: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '465阅读',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                      ),
                      Wrap(
                        spacing: 15,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        alignment: WrapAlignment.end,
                        children: [
                          RichText(
                              text: TextSpan(children: [
                            WidgetSpan(
                                child: SvgUtils.assetName('u9915', width: 15, height: 13),
                                alignment: PlaceholderAlignment.middle),
                            TextSpan(
                                text: '  23',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
                          ])),
                          RichText(
                              text: TextSpan(children: [
                            WidgetSpan(
                                child: SvgUtils.assetName('u9921', width: 15, height: 13),
                                alignment: PlaceholderAlignment.middle),
                            TextSpan(
                                text: '  35',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
                          ]))
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
            Positioned(
              top: 5,
              right: 5,
              width: 20,
              height: 20,
              child: IconButton(
                onPressed: () {
                  _removeItem(index);
                },
                icon: Icon(
                  Icons.close,
                  size: 15,
                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  void _removeItem(int index) {
    String item = controller.data.removeAt(index);
    controller.globalKey.currentState!
        .removeItem(index, (context, animation) => _buildItem(item, index, animation));
  }
}

class CommunitySunOrderController extends GetxController {
  RxList<String> urls = RxList([
    'https://gw.alicdn.com/tfs/TB15DvHUoz1gK0jSZLeXXb9kVXa-513-750.png_q90.jpg_.webp',
    'https://gw.alicdn.com/bao/uploaded/i1/2096373152/TB2ckYxXhHBK1JjSZFvXXaKtXXa_!!2096373152.jpg_320x320q90.jpg_.webp',
    'https://gw.alicdn.com/bao/uploaded/i3/372609909/TB2iktXa2fM8KJjSZPfXXbklXXa_!!372609909.jpg_320x320q90.jpg_.webp',
    'https://gw.alicdn.com/bao/uploaded/i4/2452359127/O1CN01nDut1r2HIDq2Wqp2S_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    'https://gw.alicdn.com/bao/uploaded/i1/2008147401/TB2spG9p80kpuFjy1zdXXXuUVXa_!!2008147401.jpg_320x320q90.jpg_.webp',
    'https://gw.alicdn.com/bao/uploaded/i1/516437024/O1CN01EMgpIC21l2dlQvLIW_!!516437024.jpg_320x320q90.jpg_.webp',
    'https://gw.alicdn.com/bao/uploaded/i2/619123122/O1CN01IjPOGE1YvvSoKiAWb_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    'https://gw.alicdn.com/bao/uploaded/i3/2755369392/O1CN016GLCRS2JFamXDuX3O_!!0-item_pic.jpg_320x320q90.jpg_.webp'
  ]);
}

class CommunitySunOrderView extends GetView<CommunitySunOrderController> {
  const CommunitySunOrderView({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: Obx(() => StaggeredGrid.count(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 15,
          children: controller.urls
              .map((e) => Center(
                    child: SizedBox(
                      height: 310,
                      width: 165.w,
                      child: append(e),
                    ),
                  ))
              .toList())),
    );
  }

  Widget append(String url) {
    return Column(
      children: [
        ClipRRect(
          borderRadius:
              BorderRadius.only(topLeft: Radius.circular(5.r), topRight: Radius.circular(5.r)),
          child: CachedNetworkImage(
            imageUrl: url,
            width: 165.w,
            height: 214,
            fit: BoxFit.fill,
          ),
        ),
        Container(
          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
          alignment: Alignment.centerLeft,
          color: Colors.white,
          child: Text(
            '面料很舒服，不沾身子，颜色没有让人失望，无色差',
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
            style: StylesUtils.customTextStyle(
                color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize12, lineHeight: 1.3.h),
          ),
        ),
        Container(
          padding: const EdgeInsets.only(left: 5, right: 15, bottom: 10),
          color: Colors.white,
          child: Row(
            children: [
              Expanded(
                  child: Wrap(
                spacing: 10,
                crossAxisAlignment: WrapCrossAlignment.center,
                alignment: WrapAlignment.start,
                children: [
                  SvgUtils.assetName('u10437', width: 20, height: 20),
                  Text(
                    '李白',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize12),
                  )
                ],
              )),
              Expanded(
                  child: Wrap(
                spacing: 10,
                crossAxisAlignment: WrapCrossAlignment.center,
                alignment: WrapAlignment.end,
                children: [
                  SvgUtils.assetName('u9921', width: 20, height: 20),
                  Text(
                    '20',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize12),
                  )
                ],
              )),
            ],
          ),
        )
      ],
    );
  }
}

class CommunityDigitalController extends GetxController {
  RxList<String> urls = RxList([
    'https://img10.360buyimg.com/n2/s240x240_jfs/t1/135314/4/43492/93412/6604cf24Fafcfe7ef/3ccb575f27feeada.jpg!q70.jpg.webp',
    'https://img10.360buyimg.com/n2/s240x240_jfs/t1/149087/14/17636/82886/5fd04f40Ed9f8eb28/c7cb087712f0edb7.jpg!q70.jpg.webp',
    'https://img10.360buyimg.com/n2/s270x270_jfs/t1/134158/4/37862/124833/65d0a09cF2b9355ff/0eb2d192cf3ac7b2.jpg!q70.webp',
    'https://img13.360buyimg.com/n2/s270x270_jfs/t1/177025/15/20865/179911/61260f3eE23f4842d/c3f9ce41c3a3a584.jpg!q70.webp',
    'https://img12.360buyimg.com/n2/s270x270_jfs/t1/173026/36/41662/49351/65d005d4Fd0bf297b/d580c2b03a1ee01a.jpg!q70.webp',
    'https://img13.360buyimg.com/n2/s270x270_jfs/t1/170759/2/44415/155367/66125099F13d65b29/8ae9468fb4c7415a.jpg!q70.webp',
    'https://img12.360buyimg.com/n2/s270x270_jfs/t1/184518/10/43234/112129/660d28eaF040f3eb0/c47c89b22c7262a9.jpg!q70.webp',
    'https://img10.360buyimg.com/n2/s270x270_jfs/t1/236944/33/8719/37184/658d30b4F9e982794/fd0d33c7824b1652.jpg!q70.webp'
  ]);
}

class CommunityDigitalView extends GetView<CommunityDigitalController> {
  const CommunityDigitalView({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: Obx(() => StaggeredGrid.count(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 15,
          children: controller.urls
              .map((e) => Center(
                    child: SizedBox(
                      height: 310,
                      width: 165.w,
                      child: Column(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(5.r), topRight: Radius.circular(5.r)),
                            child: CachedNetworkImage(
                              imageUrl: e,
                              width: 160.w,
                              height: 214,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
                            alignment: Alignment.centerLeft,
                            color: Colors.white,
                            child: Text(
                              '浪漫紫色三星S9+，这什么仙气颜色！',
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333,
                                  fontSize: StylesUtils.fontSize12,
                                  lineHeight: 1.3.h),
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.only(left: 5, right: 15, bottom: 10),
                            color: Colors.white,
                            child: Row(
                              children: [
                                Expanded(
                                    child: Wrap(
                                  spacing: 10,
                                  crossAxisAlignment: WrapCrossAlignment.center,
                                  alignment: WrapAlignment.start,
                                  children: [
                                    SvgUtils.assetName('u10437', width: 20, height: 20),
                                    Text(
                                      '白居易',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999,
                                          fontSize: StylesUtils.fontSize12),
                                    )
                                  ],
                                )),
                                Expanded(
                                    child: Wrap(
                                  spacing: 10,
                                  crossAxisAlignment: WrapCrossAlignment.center,
                                  alignment: WrapAlignment.end,
                                  children: [
                                    SvgUtils.assetName('u9921', width: 20, height: 20),
                                    Text(
                                      '21',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999,
                                          fontSize: StylesUtils.fontSize12),
                                    )
                                  ],
                                )),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ))
              .toList())),
    );
  }
}

class CommunityFashionController extends GetxController {
  RxList<String> urls = RxList([
    'https://img10.360buyimg.com/n2/s350x350_jfs/t1/134514/26/39508/60376/65bc4de6Fc98f534b/433f58e246536926.jpg!q70.jpg.webp',
    'https://img14.360buyimg.com/n2/s350x350_jfs/t1/242060/20/3607/107597/6610a87cF6b7f9ae5/34495bcb795aa3bd.jpg!q70.jpg.webp',
    'https://img11.360buyimg.com/n2/s350x350_jfs/t1/225841/11/14406/69977/66097f4bF1a2e898a/728c0506973f9937.jpg!q70.jpg.webp',
    'https://img12.360buyimg.com/n2/s308x308_jfs/t1/184946/39/43823/52567/660d015aFa28061d9/4cd06fac2aea9444.jpg!q70.webp',
    'https://img12.360buyimg.com/n2/s308x308_jfs/t1/184946/39/43823/52567/660d015aFa28061d9/4cd06fac2aea9444.jpg!q70.webp',
    'https://img10.360buyimg.com/n2/s308x308_jfs/t1/198106/25/41814/79402/6604ebe2Ffe0bfee0/599f322b63c31672.jpg!q70.webp',
    'https://img10.360buyimg.com/n2/s308x308_jfs/t1/198106/25/41814/79402/6604ebe2Ffe0bfee0/599f322b63c31672.jpg!q70.webp',
    'https://img14.360buyimg.com/n2/s308x308_jfs/t1/138837/32/32731/80401/63f47c61F457ed1f4/555556af9f473139.jpg!q70.webp'
  ]);
}

class CommunityFashionView extends GetView<CommunityFashionController> {
  const CommunityFashionView({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: Obx(() => StaggeredGrid.count(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 15,
          children: controller.urls
              .map((e) => Center(
                    child: SizedBox(
                      width: 165.w,
                      height: 310,
                      child: Column(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(5.r), topRight: Radius.circular(5.r)),
                            child: CachedNetworkImage(
                              imageUrl: e,
                              width: 165.w,
                              height: 214,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
                            alignment: Alignment.centerLeft,
                            color: Colors.white,
                            child: Text(
                              '丸子头新梳法，随心切换不同风格',
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333,
                                  fontSize: StylesUtils.fontSize12,
                                  lineHeight: 1.3.h),
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.only(left: 5, right: 15, bottom: 10),
                            color: Colors.white,
                            child: Row(
                              children: [
                                Expanded(
                                    child: Wrap(
                                  spacing: 10,
                                  crossAxisAlignment: WrapCrossAlignment.center,
                                  alignment: WrapAlignment.start,
                                  children: [
                                    SvgUtils.assetName('u10437', width: 20, height: 20),
                                    Text(
                                      '杜甫',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999,
                                          fontSize: StylesUtils.fontSize12),
                                    )
                                  ],
                                )),
                                Expanded(
                                    child: Wrap(
                                  spacing: 10,
                                  crossAxisAlignment: WrapCrossAlignment.center,
                                  alignment: WrapAlignment.end,
                                  children: [
                                    SvgUtils.assetName('u9921', width: 20, height: 20),
                                    Text(
                                      '21',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999,
                                          fontSize: StylesUtils.fontSize12),
                                    )
                                  ],
                                )),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ))
              .toList())),
    );
  }
}

class _MyHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double height;

  final Widget child;

  _MyHeaderDelegate({required this.child, this.height = 44.0});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  double get maxExtent => height;

  @override
  double get minExtent => height;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return maxExtent != oldDelegate.maxExtent && minExtent != oldDelegate.minExtent;
  }
}
